<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<style>
			.top_image_block{
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
				background:#18d7d7 ;
			}
			.mui-bar-nav {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			
			.mui-ellipsis-4 {
				display: -webkit-box;
				overflow: hidden;
				white-space: normal !important;
				text-overflow: ellipsis;
				word-wrap: break-word;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
			}
		</style>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	
	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">影人</h1>
		</header>
		<div class="mui-content" style="background: white;">
			<div class="top_image_block">
				<img style="width: 160px;height:240px;vertical-align: top;" :src="cover" />
			</div>
			<div style="padding: 15px;">
				<div class="dark-big">{{name}}</div>
				<div class="gray-medium">{{enName}}</div>
			</div>
			<p class="gray-small" style="margin: 10px 0 0 15px;">个人简介</p>
			<p class="dark-medium mui-ellipsis-4" style="margin: 0 15px;">{{summary}}</p>
			<p class="gray-small" style="margin: 10px 15px 0 15px">代表作品</p>
			<div style="overflow-x: scroll;white-space: nowrap;margin-left: 15px;">
				<div style="display: inline-block;" v-for="item in works" @click="open_detail(item)">
					<img v-if="item.subject.images" :src="item.subject.images.medium" style="width: 70px;height: 100px;margin-right: 10px;" />
					<img v-else style="width: 70px;height: 100px;margin-right: 10px;" />
					<div class="dark-micro mui-ellipsis" style="width:70px;text-align: center;">{{item.subject.title}}</div>
					<div class="dark-micro mui-ellipsis" style="width:70px;text-align: center;">{{item.subject.rating.average}}分</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
			function getDefaultData(){
				return{
					name:'',
					enName:'',
					cover:'',
					summary:'',
					works:[]
				}
			}
			
			//Vue对象
			var data_detail = new Vue(
				{
					el:'.mui-content',
					data:getDefaultData(),
					methods:{
						resetData:function(){//重置数据
							Object.assign(this.$data,getDefaultData());
						},
						open_detail:function(item){
							if(item.subject.id){
								mui.fire(detailPage,'movieId',{
									id:item.subject.id
								});
								detailPage.show('slide-in-right')
							}
						}
					}
				}
			);
			//添加movieId自定义事件
			window.addEventListener('castId',function(event){
				loadData();
				//获取事件参数
				var id = event.detail.id;
				plus.nativeUI.showWaiting('加载中',{
					width:'100px',
					height:'100px'
				});
				//根据id请求电影详情数据
				mui.getJSON('http://api.douban.com/v2/movie/celebrity/'+id,function(resp){
					data_detail.name = resp.name;
					data_detail.enName = resp.name_en;
					data_detail.cover = resp.avatars.large;
					data_detail.summary = resp.name+'，'+resp.gender+'，'+resp.born_place;
					data_detail.works = resp.works;
					plus.nativeUI.closeWaiting();
				})
			})
			//滚回顶部
			function loadData(){
				window.scrollTo(0, 0);//重置滚动条位置
				data_detail.resetData();//数据重置
			}
			var detailPage;
			mui.plusReady(function(){
				//给detailPage赋值,根据ID获取详情页面
				detailPage = plus.webview.getWebviewById('movies_detail')
				//预加载电影详情页面
				if(!detailPage){
					detailPage = mui.preload({
						id:'movies_detail',
						url:'./movies_detail.html'
					});
				}
			})
		</script>
	</body>

</html>